<template>
    <div class="noticeList">
        <div class="my-header"></div>
        <div class="listmain">
            <van-cell center @click="routerPush(formData)">
                <template #title>
                    <div>逝者：{{ formData.sd_ex1 }} &nbsp; 状态：{{ formData.zt }}</div>
                </template>
                <template #label>
                    <!-- 乡镇审核不通过 -->
                    <div v-if="formData.sd_ex21 == 'B'">审核拒绝原因：{{ formData.sd_ex46 }}</div>
                    <!-- 殡仪馆审核不通过 -->
                    <div v-if="formData.sd_ex21 == 'B1'">审核拒绝原因：{{ formData.sd_ex47 }}</div>
                    <div>逝者身份证：{{ formData.sd_ex4 }}</div>
                    <div>承办人：{{ formData.sd_ex8 }} &nbsp; 承办人身份证：{{ formData.sd_ex10 }}</div>
                    <div>承办人手机号：{{ formData.sd_ex35 }}</div>
                    <div>承办人开户银行：{{ formData.sd_ex12 }}</div>
                    <div>承办人银行卡号：{{ formData.sd_ex13 }}</div>
                    <div>申报项目补助总计金额：{{ formData.sd_ex38 }}</div>
                    <div style="color: #1d2127">申报项目补助：</div>
                    <div>火化费：{{ formData.sd_ex39 }}</div>
                    <div>遗体接运费：{{ formData.sd_ex40 }}</div>
                    <div>遗体冷藏费：{{ formData.sd_ex42 }}</div>
                </template>
                <!-- <template #value>
					<van-button 
						type="primary" 
						size="mini"
						@click.stop="cancel(formData)"
					>
						取消预约
					</van-button>
				</template> -->
            </van-cell>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue';
    import type { Ref } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant';
    import { getDeclarationInfoApi } from '@/apis';
    import { useStore } from '@/store';
    import { phoneHide, cardHide } from '@/utils';
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const formData: Ref<any> = ref({});
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    });
    getDeclarationInfoApi({
        sd_id: route.query.sd_id,
        openid: store.openid,
    })
        .then((res) => {
            formData.value = res[0].list[0];
            formData.value.sd_ex4 = cardHide(formData.value.sd_ex4);
            formData.value.sd_ex35 = phoneHide(formData.value.sd_ex35);
            formData.value.sd_ex10 = cardHide(formData.value.sd_ex10);
        })
        .finally(() => {
            closeToast();
        });

    const routerPush = (val) => {
        // 后面看是跳转还是什么
        console.log(val);
    };
</script>

<style lang="scss" scoped>
    .noticeList {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: url(@/assets/img/bg/bg11.png);
        background-size: 100% 100%;
    }
    // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/img/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
    // .my-header {
    // 	display: flex;
    // 	justify-content: center;
    // 	background: url(@/assets/policy/policybg.png) no-repeat;
    // 	background-size: 100% 90%;
    // 	margin-bottom: 10px;
    // 	border-radius: 10px;
    // }

    // .my-header::after {
    // 	content: '';
    // 	width: 95%;
    // 	height: 185px;
    // 	margin-top: 20px;
    // 	background: url(@/assets/banner/gmjs_bg.png);
    // 	background-size: 100% 100%;
    // 	border-radius: 5px;
    // }

    .my-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .maindiv {
        width: 90%;
        /* border: 1px solid #2C3E50; */
        box-shadow: 0px 0px 5px 5px #e3eee9;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
    }

    .maindivfont1 {
        color: #333333;
        font-size: 12pt;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .maindivfont2 {
        color: #666666;
        font-size: 10pt;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .listmain {
        flex: 1;
        overflow: auto;
    }
</style>
